import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import category from '../views/category.vue'
import categorylist from '../views/categorylist.vue'
import product from '../views/product.vue'
import buycart from "../views/buycart.vue"
import Topic from '../views/Topic.vue'
import PersonalCenter from '../views/PersonalCenter.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }, 
  {
    //专题路由
  path: '/topic',
  name: 'topic',
  component: Topic
},

  {
      //分类页路由
    path: '/category',
    name: 'category',
    component: category
  },
  {
    //分类列表路由
    path:"/categorylist/:id",
    name:'categorylist',
    component:categorylist,
    props:true
  },{
    //产品路由
    path:"/product/:id",
    name:product,
    component:product,
    props:true
  },{
    //购物车路由
    path:"/buycart",
    name:buycart,
    component:buycart
  },{
    //个人中心路由
    path:"/PersonalCenter",
    name:PersonalCenter,
    component:PersonalCenter
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
